<template>
  <div class="container">
    <van-form @submit="onSubmit" :show-error-message="error">
      <!--      意向岗位-->
      <van-cell title="意向岗位" required/>
      <div class="input_">
        <div class="input_">
          <van-field
            v-model="intention_job"
            name="intention_job"
            placeholder="输入您的期望从事的职业"
            :rules="[{ required: true, message: '请填写您的意向岗位' }]"
          />
        </div>
      </div>
      <!--      工作地区-->
      <van-cell title="意向岗位" required/>
      <div class="input_">
        <div class="input_">
          <van-field
            v-model="work_area"
            name="work_area"
            placeholder="输入您的期望从事的职业"
            :rules="[{ required: true, message: '请填写您的意向岗位' }]"
          />
        </div>
      </div>
      <!--      期望从事的行业-->
      <van-cell title="期望从事行业" required/>
      <div class="input_">
        <div class="input_">
          <van-field
            v-model="qw_industry"
            name="qw_industry"
            placeholder="输入您的期望从事的职业"
            :rules="[{ required: true, message: '请填写您的意向岗位' }]"
          />
        </div>
      </div>
      <!--      期望薪资-->
      <van-cell title="期望薪资" required/>
      <div class="input_">
        <van-field
          is-link
          readonly
          clickabler
          name="salary"
          :value="salary"
          placeholder="点击选择期望的薪资"
          @click="showPicker1 = true"
          :rules="[{ required: true, message: '请填写您期望的薪资' }]"
        />
      </div>
      <van-popup v-model="showPicker1" position="bottom" :style="{ height: '40%' }" round>
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker1 = false"
        />
      </van-popup>
      <!--      是否面议-->
      <van-cell title="是否面议" required/>
      <van-field name="radio">
        <template #input>
          <van-radio-group v-model="radio" direction="horizontal">
            <van-radio name="1">是</van-radio>
            <van-radio name="2">否</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <!--      自我评价-->
      <van-cell title="自我评价" required/>
      <div class="input_">
        <van-field
          v-model="self_assessment"
          name="self_assessment"
          rows="2"
          autosize="autosize"
          type="textarea"
          maxlength="50"
          placeholder="您可以对自己进行评价"
          show-word-limit
        />
      </div>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" color="#59C262">
          下一步
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: 'contentInput',
  data () {
    return {
      intention_job: '',
      work_area: '',
      qw_industry: '',
      error: false,
      columns: ['xx', 'yy'],
      showPicker1: false,
      salary: '',
      radio: '',
      self_assessment: '',
      autosize: {
        maxHeight: 100,
        minHeight: 50
      }
    }
  },
  methods: {
    onSubmit (e) {
      console.log(e)
      this.$router.push('/work')
    },
    onConfirm (v) {
      this.salary = v
      this.showPicker1 = false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .van-cell {
  padding: 5px 16px;
  border-radius: 8px;
}

.container {
  padding: 5px 10px;
}

.input_ {
  border: 1px solid #cccccc;
  border-radius: 8px;
}
</style>
